<template>
  <div id="carRegister_box">
    <!--首页弹窗-->
    <div class="showcardphoto" v-show="popuphdBox">
      <div class="popup_hd">
        <h6 class="popup_hd_text">认证车主需要准备以下材料</h6>
        <p class="popup_hd_top_tip">信息仅用于车主认证</p>
        <div class="popup_hd_list">
          <ul>
            <li>
              <img src="@/assets/imgs/taxi_sj_grxx_sfrz.png" />
              <span>身份证</span>
            </li>
            <li>
              <img src="@/assets/imgs/taxi_sj_grxx_sfrz.png" />
              <span>驾驶证</span>
            </li>
            <li>
              <img src="@/assets/imgs/taxi_sj_grxx_sfrz.png" />
              <span>行驶证</span>
            </li>
            <li>
              <img src="@/assets/imgs/taxi_sj_grxx_sfrz.png" />
              <span>车辆照片</span>
            </li>
          </ul>
        </div>
        <div style="clear:both"></div>
        <h6 class="popup_hd_text">对车主有什么要求？</h6>
        <p class="popup_hd_top_tip">1. 驾龄3年以上，驾驶证C2及以上</p>
        <p class="popup_hd_top_tip">2. 22~55周岁，驾驶证在有效期内</p>
        <p class="popup_hd_top_tip">
          3. 非社会失信人员，无交通肇事、酒驾 吸毒等犯罪记录
        </p>
        <h6 class="popup_hd_text">对车辆有什么要求？</h6>
        <p class="popup_hd_top_tip">非运用车辆，7座及以下乘用车</p>
        <p class="popup_hd_top_tip">车辆年限15年内且已按期限年检</p>
        <p class="popup_hd_btn" @click="popuphdBtn">知道了</p>
      </div>
    </div>
    <!--行驶证-->
    <div class="showcardphoto" v-show="showDrivingLicense">
      <div class="quickCard_box">
        <div
          class="showcardimg_box"
          v-show="sourceType == 'wx' || sourceType == 'app'"
        >
          <p v-if="licensePositiveUrl" @click="licensePositiveUpload">
            <img ref="licensePositiveRef" :src="licensePositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="licensePositiveUpload">
            <img
              ref="licensePositiveRef"
              src="@/assets/imgs/taxi_xsz_zheng@2x.png"
            />
            <span>点击上传</span>
          </p>
          <p v-if="licenseReverseUrl" @click="licenseReverseUpload">
            <img ref="licenseReverseRef" :src="licenseReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="licenseReverseUpload">
            <img
              ref="licenseReverseRef"
              src="@/assets/imgs/taxi_xsz_bei@2x.png"
            />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardimg_box" v-show="sourceType == 'h5'">
          <div>
            <md-image-reader
              name="reader1"
              @complete="onImgComplete"
              :mime="['jpg', 'png', 'jpeg']"
            ></md-image-reader>
            <p v-if="licensePositiveUrl" @click="licensePositiveUpload">
              <img ref="licensePositiveRef" :src="licensePositiveUrl" />
              <span>点击上传</span>
            </p>
            <p v-else @click="licensePositiveUpload">
              <img
                ref="licensePositiveRef"
                src="@/assets/imgs/taxi_xsz_zheng@2x.png"
              />
              <span>点击上传</span>
            </p>
          </div>
          <div>
            <md-image-reader
              name="reader2"
              @complete="onImgComplete"
              :mime="['jpg', 'png', 'jpeg']"
            ></md-image-reader>
            <p v-if="licenseReverseUrl" @click="licenseReverseUpload">
              <img ref="licenseReverseRef" :src="licenseReverseUrl" />
              <span>点击上传</span>
            </p>
            <p v-else @click="licenseReverseUpload">
              <img
                ref="licenseReverseRef"
                src="@/assets/imgs/taxi_xsz_bei@2x.png"
              />
              <span>点击上传</span>
            </p>
          </div>
        </div>
        <div class="showcardtext">
          <h6>行驶证正反面</h6>
          <p>
            请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡
          </p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="licenseCannelBtn">取消</span>
          <span class="cardupload" @click="licenseUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <!--车辆照片-->
    <div class="showcardphoto" v-show="showMancarphoto">
      <div class="quickCard_box">
        <div
          class="showcardimg_box"
          v-show="sourceType == 'wx' || sourceType == 'app'"
        >
          <p v-if="mancarUrl" @click="mancarReverseUpload">
            <img ref="mancarRef" :src="mancarUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="mancarReverseUpload">
            <img ref="mancarRef" src="@/assets/imgs/taxi_clxx_rchy@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardimg_box" v-show="sourceType == 'h5'">
          <div>
            <md-image-reader
              name="reader3"
              @complete="onImgComplete"
              :mime="['jpg', 'png', 'jpeg']"
            ></md-image-reader>
            <p v-if="mancarUrl" @click="mancarReverseUpload">
              <img ref="mancarRef" :src="mancarUrl" />
              <span>点击上传</span>
            </p>
            <p v-else @click="mancarReverseUpload">
              <img ref="mancarRef" src="@/assets/imgs/taxi_clxx_rchy@2x.png" />
              <span>点击上传</span>
            </p>
          </div>
        </div>
        <div class="showcardtext">
          <h6>车辆照片</h6>
          <p>
            请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡
          </p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="mancarCannelBtn">取消</span>
          <span class="cardupload" @click="mancarUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <top-bar :title="title"></top-bar>
    <div class="hitchregister_top">
      <div class="hitchregister_top_box">
        <div class="hitchregister_top_box_left">
          <p><span>1</span>车辆认证</p>
        </div>
        <div class="hitchregister_top_box_center">
          <p></p>
        </div>
        <div class="hitchregister_top_box_right">
          <p><span>2</span>车主认证</p>
        </div>
      </div>
      <div style="clear:both"></div>
      <p class="hitchregister_tip">
        信息仅用于车主认证，平安到家保障您的信息安全
      </p>
    </div>
    <div class="hitchregister_ct">
      <div class="card_number">
        <span>{{ abbreviation }}</span>
        <i></i>
        <span @click="getCardNumber">
          <b>{{ licenseplate }}</b>
          <img src="@/assets/imgs/sanjiao.png" />
        </span>
      </div>
      <md-field>
        <md-field-item
          name
          title="行驶证照片"
          align="right"
          arrow="arrow-right"
          :value="showpermittext"
          @click="drivingLicenseBtn"
        ></md-field-item>
        <md-input-item
          ref="车辆所有人"
          title="车辆所有人"
          placeholder="请输入车辆所有人"
          align="right"
          v-model="carpeople"
          maxlength="5"
        ></md-input-item>
        <md-input-item
          ref="车牌号"
          title="车牌号"
          placeholder="请输入车牌号"
          align="right"
          v-model="cardNumber"
          maxlength="8"
        ></md-input-item>
        <md-field-item
          name
          title="车辆注册日期"
          align="right"
          arrow="arrow-right"
          :value="registrationDate"
          @click="registrationDateBtn"
        ></md-field-item>
        <md-field-item
          name
          title="车辆品牌"
          align="right"
          arrow="arrow-right"
          :value="cardModel"
          @click="getCarModel"
        ></md-field-item>
        <md-field-item
          name
          title="车辆颜色"
          align="right"
          arrow="arrow-right"
          :value="cardColor"
          @click="goColorCard"
        ></md-field-item>
        <md-field-item
          name
          title="上传车辆照片"
          align="right"
          arrow="arrow-right"
          :value="showMancartext"
          @click="mancarBtn"
        ></md-field-item>
      </md-field>
    </div>
    <div class="companynextBtn" @click="nextBtn">
      <p>下一步</p>
    </div>
    <md-picker
      ref="picker"
      v-model="isshowCardNumber"
      :data="cardNumberData"
      :cols="2"
      is-cascade
      title="车牌号"
      @confirm="onPickerConfirm()"
    ></md-picker>
    <md-date-picker
      ref="registerdatePicker"
      v-model="isRegisterDatePickerShow"
      :unit-text="unitText"
      title="车辆注册日期"
      :minDate="minDate"
      :maxDate="maxDate"
      :default-date="currentDate"
      @confirm="onRegisterDatePickerConfirm"
    ></md-date-picker>
    <md-popup
      v-model="colorCardshoShow"
      position="bottom"
      :has-mask="true"
      prevent-scroll
      @hide="colorCarCancel"
    >
      <md-popup-title-bar
        title="车辆颜色"
        ok-text
        cancel-text="取消"
        @cancel="colorCarCancel"
      ></md-popup-title-bar>
      <div class="color_car_box">
        <md-scroll-view
          ref="scrollView"
          :auto-reflow="true"
          :scrolling-x="false"
          :bouncing="false"
        >
          <div class="color_car">
            <ul>
              <li
                v-for="(item, index) in colorCardArr"
                :key="index"
                @click="getCarColor(item.name)"
              >
                <span :style="'background-color:' + item.color"></span>
                {{ item.name }}
              </li>
            </ul>
          </div>
        </md-scroll-view>
      </div>
    </md-popup>
    <md-popup v-model="carModelList" position="bottom">
      <md-popup-title-bar
        title="选择车辆品牌"
        cancel-text="关闭"
        @cancel="hideCarPopUp()"
      ></md-popup-title-bar>
      <div class="city_list_box">
        <p class="city_hd">请选择车辆品牌</p>
        <md-scroll-view
          id="city-box"
          ref="airScrollView"
          :scrolling-x="false"
          :bouncing="false"
          :auto-reflow="true"
          @scroll="$_onScroll"
        >
          <div
            v-for="(item, $index) in carModelListData"
            :key="$index"
            class="scroll-view-list scroll-view-category"
          >
            <div class="letter scroll-view-category-title" :ref="item.letter">
              {{ item.letter }}
            </div>
            <div
              class="city-name"
              v-for="(carname, $c) in item.data"
              :key="$c"
              @click="carSubmit(carname)"
            >
              {{ carname.name }}
            </div>
          </div>
        </md-scroll-view>
        <div class="fixed-letter">
          <div
            class="letters"
            v-for="(item, $index) in carModelListData"
            :key="$index"
            @click="scrollToLetter(item.letter)"
          >
            {{ item.letter }}
          </div>
        </div>
      </div>
    </md-popup>
    <md-popup v-model="carModelListmore" position="right">
      <div class="carModelListmore_box">
        <md-scroll-view
          id="city-box-list"
          ref="airScrollViewlist"
          :scrolling-x="false"
          :bouncing="false"
          :auto-reflow="true"
          @scroll="$_onScroll"
        >
          <div class="carModelListmorelist">
            <p
              v-for="(item, index) in carModelListmoredata"
              :key="index"
              @click="getCarModelListmore(item)"
            >
              {{ item.name }}
            </p>
          </div>
        </md-scroll-view>
      </div>
    </md-popup>
  </div>
</template>
<script>
import {
  Icon,
  Field,
  FieldItem,
  InputItem,
  Toast,
  ImageReader,
  Dialog,
  Popup,
  PopupTitleBar,
  DatePicker,
  ScrollView,
  Picker
} from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import CardNumber from '@/common/cardNumber';
import { Base64 } from 'js-base64';
import TopBar from '@/components/TopBar';
import Utils from '@/common/pakjUtils';
import WxUtils from '@/common/weixinUtils';
import axios from 'axios';
import OSS from 'ali-oss';
let client = new OSS({
  region: 'oss-cn-qingdao',
  accessKeyId: 'LTAI0oUoBK7GwQn4',
  accessKeySecret: 'gHqAlhq2pX57Jz8XCO0zMLsKlZoAlX',
  bucket: 'pakj'
});
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [TopBar.name]: TopBar,
    [ImageReader.name]: ImageReader,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [DatePicker.name]: DatePicker,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker,
    [ScrollView.name]: ScrollView
  },
  data() {
    return {
      title: '车辆认证',
      carModelList: false,
      carModelListData: [],
      carModelData: [],
      carModelListmore: false,
      carModelListmoredata: [],
      carNamefist: '',
      popuphdBox: true,
      sourceType: '',
      showDrivingLicense: false,
      showpermittext: '立即上传',
      licensePositiveUrl: '', // 行驶证正面
      licenseReverseUrl: '', // 行驶证反面
      licensePositiveImg: '', // 传入后台行驶证正面
      licenseReverseImg: '', // 传入后台行驶证反面
      carpeople: '', //  车辆姓名
      isshowCardNumber: false,
      cardNumber: '', // 车牌号
      abbreviation: '京',
      licenseplate: 'A',
      cardNumberData: CardNumber.getdriverArea(),
      cardModel: '请选择车辆品牌', // 车辆品牌
      cardColor: '请选择车辆颜色', // 车辆颜色
      colorCardshoShow: false,
      colorCardArr: [
        {
          color: '#fff',
          name: '白色'
        },
        {
          color: '#333',
          name: '黑色'
        },
        {
          color: '#ccc',
          name: '银色'
        },
        {
          color: '#FF3F40',
          name: '红色'
        },
        {
          color: '#B96700',
          name: '棕色'
        },
        {
          color: '#DAAB65',
          name: '金色'
        },
        {
          color: '#2781FF',
          name: '蓝色'
        },
        {
          color: '#57CC5C',
          name: '绿色'
        },
        {
          color: '#777777',
          name: '灰色'
        },
        {
          color: '#FFEBCC',
          name: '米色'
        },
        {
          color: '#FFDB5C',
          name: '黄色'
        },
        {
          color: '#9059FF',
          name: '紫色'
        },
        {
          color: '#6C3400',
          name: '褐色'
        },
        {
          color: '#FF9F9F',
          name: '粉色'
        },
        {
          color: '#FF7E00',
          name: '橙色'
        },
        {
          color: '',
          name: '其它'
        }
      ],
      registrationDate: '请选择车辆注册日期',
      isRegisterDatePickerShow: false,
      minDate: new Date('1970/9/9'),
      maxDate: new Date(),
      currentDate: new Date(),
      unitText: ['', '', '', '', ''],
      showMancarphoto: false,
      mancarUrl: '', // 车辆照片
      mancarImg: '', // 传入后台车辆照片
      showMancartext: '立即上传'
    };
  },
  async mounted() {
    let result = await fetch('https://img.padj.group/jslibs/branddata.json');
    this.carModelData = await result.json();
    // 判断是否在微信浏览器
    if (Utils.isWeixinBroswer()) {
      WxUtils.wxConfig(['chooseImage', 'getLocalImgData']);
    }
    switch (Utils.getCurrentEnv()) {
      case 'wx':
        this.sourceType = 'wx';
        break;
      case 'h5':
        this.sourceType = 'h5';
        break;
      case 'app':
        this.sourceType = 'app';
        break;
    }
    // 信息回显
    Loading.show();
    http
      .post('/pakj/recruitHitchDriver/getHitchDriverCarRecruit', {})
      .then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          if (!res.data.data) {
            return;
          }
          if (!res.data.data.drivingLicense) {
            this.showpermittext = '立即上传';
          } else {
            this.licensePositiveUrl = res.data.data.drivingLicense; // 行驶证正面照片
            this.licensePositiveImg = res.data.data.drivingLicense;
            this.showpermittext = '重新上传';
          }
          if (!res.data.data.drivingLicenseReverse) {
            this.showpermittext = '立即上传';
          } else {
            this.licenseReverseUrl = res.data.data.drivingLicenseReverse; // 行驶证反面照片
            this.licenseReverseImg = res.data.data.drivingLicenseReverse;
            this.showpermittext = '重新上传';
          }
          if (!res.data.data.carOwner) {
            this.carpeople = '';
          } else {
            this.carpeople = res.data.data.carOwner; // 车辆所有人
          }
          if (!res.data.data.licensePlate) {
            this.abbreviation = '京';
            this.licenseplate = 'A';
            this.cardNumber = '';
          } else {
            this.abbreviation = res.data.data.licensePlate.substring(0, 1);
            this.licenseplate = res.data.data.licensePlate.substring(1, 2);
            this.cardNumber = res.data.data.licensePlate.substring(2);
          }
          if (!res.data.data.carRegDate) {
            this.registrationDate = '请选择车辆注册日期'; // 车辆注册时间
          } else {
            this.registrationDate = moment(
              res.data.data.carRegDate,
              'x'
            ).format('YYYY-MM-DD'); // 车辆注册时间
          }
          // 车辆品牌
          if (!res.data.data.carModel) {
            this.cardModel = '请选择车辆品牌';
          } else {
            this.cardModel = res.data.data.carModel;
          }
          // 车辆颜色
          if (!res.data.data.carColor) {
            this.cardColor = '请选择车辆颜色';
          } else {
            this.cardColor = res.data.data.carColor;
          }
          if (!res.data.data.carPhoto) {
            this.mancarUrl = ''; // 车辆照片
            this.showMancartext = '立即上传';
          } else {
            this.mancarUrl = res.data.data.carPhoto; // 车辆照片
            this.mancarImg = this.mancarUrl;
            this.showMancartext = '重新上传';
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
  },
  methods: {
    hideCarPopUp() {
      this.carModelList = false;
    },
    $_onScroll({ scrollTop }) {
      this.scrollY = scrollTop;
    },
    scrollToLetter(letter) {
      this.$refs.airScrollView.scrollTo(
        0,
        this.$refs[letter][0].offsetTop,
        true
      );
    },
    carSubmit(carModel) {
      this.carModelListmoredata = carModel.sub;
      this.carModelListmore = true;
      this.carNamefist = carModel.name;
    },
    getCarModelListmore(item) {
      this.carModelList = false;
      this.carModelListmore = false;
      this.cardModel = this.carNamefist + item.name;
    },
    carList() {
      // 获取车辆品牌
      this.carModelListData = this.citySort(this.carModelData);
    },
    citySort(arr) {
      var letters = '*ABCDEFGHJKLMNOPQRSTWXYZ'.split('');
      var segs = [];
      var curr;
      letters.forEach(function(item, i) {
        curr = {
          letter: item,
          data: []
        };
        arr.forEach(function(obj) {
          let p = pinyinUtil.getFirstLetter(obj.name)[0];
          if (item === p) {
            curr.data.push(obj);
          }
        });
        if (curr.data.length) {
          segs.push(curr);
        }
      });
      return segs;
    },
    // 关闭首页弹窗
    popuphdBtn() {
      this.popuphdBox = false;
    },
    // 拉起行驶证弹窗
    drivingLicenseBtn() {
      this.showDrivingLicense = true;
    },
    // 微信行驶证正面或者app
    licensePositiveUpload() {
      let type = '1';
      if (this.sourceType === 'wx') {
        this.pullUpWxUpload(type);
      } else if (this.sourceType === 'app') {
        this.pullUpAppUpload(type);
      }
    },
    // 微信行驶证反面或者app
    licenseReverseUpload() {
      let type = '2';
      if (this.sourceType === 'wx') {
        this.pullUpWxUpload(type);
      } else if (this.sourceType === 'app') {
        this.pullUpAppUpload(type);
      }
    },
    // 拉起车辆照片弹窗
    mancarBtn() {
      this.showMancarphoto = true;
    },
    // 微信车辆照片或者app
    mancarReverseUpload() {
      let type = '3';
      if (this.sourceType === 'wx') {
        this.pullUpWxUpload(type);
      } else if (this.sourceType === 'app') {
        this.pullUpAppUpload(type);
      }
    },
    // 拉起app上传
    pullUpAppUpload(number) {
      /* eslint-disable */
      var type = {
        type: number
      };
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.hitchDriverUpload(JSON.stringify(type));
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.hitchDriverUpload.postMessage(
          JSON.stringify(type)
        );
      }
      window.hitchuploadcallback = this.hitchuploadcallback;
      // Loading.show();
    },
    hitchuploadcallback(msg) {
      var data = JSON.parse(Base64.decode(msg));
      switch (String(data.type)) {
        // 1 行驶证正面
        case '1':
          this.licensePositiveUrl = data.url;
          break;
        // 2 行驶证反面
        case '2':
          this.licenseReverseUrl = data.url;
          break;
        // 3 车辆照片
        case '3':
          this.mancarUrl = data.url;
          break;
        default:
          break;
      }
      console.log(data);
    },
    // 微信上传
    pullUpWxUpload(type) {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          wx.getLocalImgData({
            localId: res.localIds[0], // 图片的localID
            success: res => {
              if (
                Utils.getOSName()
                  .toLowerCase()
                  .indexOf('android') >= 0
              ) {
                res.localData = 'data:image/jpeg;base64,' + res.localData;
              }
              // console.log(res.localData);
              this.weixinUpload(res.localData, type);
            }
          });
        }
      });
    },
    weixinUpload(data, type) {
      Loading.show('上传中');
      var date = new Date();
      let typeImg = ''; // 上传图片属于那种类型 例如 驾驶证 行驶证 正反面
      switch (type) {
        case '1':
          typeImg = 'licensePositive'; // 行驶证正面
          break;
        case '2':
          typeImg = 'licenseReverse'; // 行驶证反面
          break;
        case '3':
          typeImg = 'mancar'; // 车辆照片
          break;
      }
      var time =
        '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
      var storeAs =
        'hitchdriver/' + typeImg + '/' + time + '-' + date.getTime() + '.jpg';
      // blob转arrayBuffer
      var reader = new FileReader();
      reader.readAsArrayBuffer(this.dataURLtoFile(data));
      reader.onload = event => {
        var buffer = new OSS.Buffer(event.target.result);
        client
          .put(storeAs, buffer, {})
          .then(results => {
            let imgUrl = 'https://img.padj.group/' + results.name; // 照片回显
            switch (type) {
              case '1':
                this.licensePositiveUrl = imgUrl;
                this.$nextTick(() => {
                  this.$refs.licensePositiveRef.onload = () => {
                    Loading.hide();
                  };
                });
                break;
              case '2':
                this.licenseReverseUrl = imgUrl;
                this.$nextTick(() => {
                  this.$refs.licenseReverseRef.onload = () => {
                    Loading.hide();
                  };
                });
                break;
              case '3':
                this.mancarUrl = imgUrl;
                this.$nextTick(() => {
                  this.$refs.mancarRef.onload = () => {
                    Loading.hide();
                  };
                });
                break;
            }
          })
          .catch(err => {
            Loading.hide();
            console.log(err);
          });
      };
    },
    // h5图片上传
    onImgComplete(name, file) {
      Loading.show('上传中');
      if (file.file.type === 'image/jpeg' || file.file.type === 'image/png') {
        var date = new Date();
        let typeImg = ''; // 上传图片属于那种类型 例如 驾驶证 行驶证 正反面
        switch (name) {
          case 'reader1':
            typeImg = 'licensePositive'; // 行驶证正面
            break;
          case 'reader2':
            typeImg = 'licenseReverse'; // 行驶证反面
            break;
          case 'reader3':
            typeImg = 'mancar'; // 车辆照片
            break;
        }
        var time =
          '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
        var storeAs =
          'hitchdriver/' +
          typeImg +
          '/' +
          time +
          '-' +
          date.getTime() +
          '.' +
          file.file.name;
        // blob转arrayBuffer
        var reader = new FileReader();
        reader.readAsArrayBuffer(this.dataURLtoFile(file.dataUrl));
        reader.onload = event => {
          var buffer = new OSS.Buffer(event.target.result);
          client
            .put(storeAs, buffer, {})
            .then(results => {
              let imgUrl = 'https://img.padj.group/' + results.name; // 照片回显
              switch (name) {
                case 'reader1':
                  this.licensePositiveUrl = imgUrl;
                  this.$nextTick(() => {
                    this.$refs.licensePositiveRef.onload = () => {
                      Loading.hide();
                    };
                  });
                  break;
                case 'reader2':
                  this.licenseReverseUrl = imgUrl;
                  this.$nextTick(() => {
                    this.$refs.licenseReverseRef.onload = () => {
                      Loading.hide();
                    };
                  });
                  break;
                case 'reader3':
                  this.mancarUrl = imgUrl;
                  this.$nextTick(() => {
                    this.$refs.mancarRef.onload = () => {
                      Loading.hide();
                    };
                  });
                  break;
              }
            })
            .catch(err => {
              Loading.hide();
              console.log(err);
            });
        };
      } else {
        Loading.hide();
        Dialog.alert({
          title: '提示',
          content: '图片格式错误',
          confirmText: '确定'
        });
      }
    },
    dataURLtoFile(dataurl) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 行驶证上传取消
    licenseCannelBtn() {
      if (this.licensePositiveImg) {
        this.showpermittext = '重新上传';
      } else {
        this.licensePositiveUrl = '';
        this.licenseReverseUrl = '';
        this.showpermittext = '立即上传';
      }
      this.showDrivingLicense = false;
    },
    // 行驶证上传
    licenseUploadBtn() {
      if (!this.licensePositiveUrl) {
        Toast({
          content: '请上传行驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.licenseReverseUrl) {
        Toast({
          content: '请上传行驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.licensePositiveImg = this.licensePositiveUrl;
      this.licenseReverseImg = this.licenseReverseUrl;
      this.showpermittext = '重新上传';
      this.showDrivingLicense = false;
    },
    // 车辆照片上传取消
    mancarCannelBtn() {
      if (this.mancarImg) {
        this.showMancartext = '重新上传';
      } else {
        this.mancarUrl = '';
        this.showMancartext = '立即上传';
      }
      this.showMancarphoto = false;
    },
    // 上传车辆照片
    mancarUploadBtn() {
      if (!this.mancarUrl) {
        Toast({
          content: '请上传车辆照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.mancarImg = this.mancarUrl;
      this.showMancartext = '重新上传';
      this.showMancarphoto = false;
    },
    // 拉起车牌号
    getCardNumber() {
      this.isshowCardNumber = true;
    },
    onPickerConfirm() {
      const values = this.$refs.picker.getColumnValues();
      let res = [];
      values.forEach(value => {
        res.push(value.text);
      });
      this.abbreviation = res[0]; // 省份简称
      this.licenseplate = res[1];
    },

    // 获取车辆品牌
    getCarModel() {
      this.carList();
      this.carModelList = true;
    },
    // 获取车辆注册日期
    registrationDateBtn() {
      this.isRegisterDatePickerShow = true;
    },
    onRegisterDatePickerConfirm() {
      this.registrationDate = this.$refs.registerdatePicker.getFormatDate(
        'yyyy-MM-dd'
      );
    },
    // 选择颜色
    goColorCard() {
      this.colorCardshoShow = true;
    },
    colorCarCancel() {
      this.colorCardshoShow = false;
    },
    // 获取颜色
    getCarColor(name) {
      this.cardColor = name;
      this.colorCardshoShow = false;
    },
    // 下一步
    nextBtn() {
      var regTexcarpeople = /^[\u4e00-\u9fa50-9a-zA-Z]+$/gi;
      var regCard = /^[0-9a-zA-Z]+$/;
      if (!this.licensePositiveImg) {
        Toast({
          content: '请上传行驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.licenseReverseImg) {
        Toast({
          content: '请上传行驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.carpeople) {
        Toast({
          content: '请输入车辆所有人',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!regTexcarpeople.test(this.carpeople)) {
        Toast({
          content: '车辆所有人格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardNumber) {
        Toast({
          content: '请输入车牌号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!regCard.test(this.cardNumber)) {
        Toast({
          content: '车牌号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.registrationDate === '请选择车辆注册日期') {
        Toast({
          content: '请选择车辆注册日期',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.cardModel === '请选择车辆品牌') {
        Toast({
          content: '请选择车辆品牌',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.cardColor === '请选择车辆颜色') {
        Toast({
          content: '请选择车辆颜色',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.mancarImg) {
        Toast({
          content: '请上传车辆照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        userPhone: encryptByDESModeEBC(this.$route.query.userphone),
        drivingLicense: this.licensePositiveImg, // 行驶证照片
        drivingLicenseReverse: this.licenseReverseImg, // 行驶证反面照片
        licensePlate: this.abbreviation + this.licenseplate + this.cardNumber, // 车牌号
        carColor: this.cardColor, // 车辆颜色
        carModel: this.cardModel, // 车辆品牌
        carOwner: this.carpeople, // 车辆所有人
        carRegDate: this.registrationDate, // 车辆注册时间
        carPhoto: this.mancarImg // 人车合影照片
      };
      Loading.show();
      http
        .post('/pakj/recruitHitchDriver/hitchDriverCarRecruit', params)
        .then(res => {
          Loading.hide();
          if (res.data.code === '000000') {
            let hitchDriverRecruitId = res.data.data;
            this.$router.push({
              name: 'ownerRegister',
              query: {
                hitchdriverid: hitchDriverRecruitId,
                userphone: this.$route.query.userphone
              }
            });
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
    }
  }
};
</script>
<style lang="stylus">
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#carRegister_box {
  height: 100vh;
  background-color: color-primary-background;

  .hitchregister_top {
    background-color: #fff;
    height: 168px;
    margin-top: 20px;
  }

  .hitchregister_top_box {
    padding-top: 45px;
  }

  .hitchregister_top_box_left {
    float: left;
    margin-left: 150px;
  }

  .hitchregister_top_box_left p {
    color: #FF6917;
    font-size: 30px;
  }

  .hitchregister_top_box_left p span {
    background-color: #FF6917;
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 36px;
    margin-right: 10px;
  }

  .hitchregister_top_box_center {
    float: left;
    margin: 0px 10px;
  }

  .hitchregister_top_box_center p {
    width: 104px;
    height: 1px;
    background-color: #D8D8D8;
    margin-top: 21px;
  }

  .hitchregister_top_box_right {
    float: left;
  }

  .hitchregister_top_box_right p {
    color: #666;
    font-size: 30px;
  }

  .hitchregister_top_box_right p span {
    background-color: #CBCBCB;
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 36px;
    margin-right: 10px;
  }

  .hitchregister_tip {
    font-size: 22px;
    color: #999;
    margin-top: 10px;
    text-align: center;
  }

  .hitchregister_ct {
    margin-top: 20px;
    position: relative;
  }

  .card_number {
    position: absolute;
    top: 215px;
    left: 300px;
    width: 156px;
    height: 50px;
    border-radius: 6px;
    border: 1px solid rgba(224, 224, 224, 1);
    z-index: 100;
  }

  .card_number span {
    display: inline-block;
    line-height: 50px;
    height: 50px;
    width: 76px;
    text-align: center;
    overflow: hidden;
  }

  .card_number span b {
    font-weight: 400;
  }

  .card_number i {
    height: 40px;
    width: 1px;
    background-color: #999999;
    display: inline-block;
    line-height: 40px;
    position: absolute;
    top: 5px;
    left: 70px;
  }

  .card_number span img {
    width: 40px;
    position: relative;
    top: 8px;
  }

  .companynextBtn {
    position: absolute;
    bottom: 20px;
    width: 100%;
  }

  .companynextBtn p {
    height: 98px;
    line-height: 98px;
    background-color: #FF6917;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    margin: 0px 20px;
  }

  .color_car_box {
    background-color: #fff;
    height: 600px;
    overflow: hidden;
    overflow-y: auto;
  }

  .color_car {
    height: auto;
  }

  .color_car ul li {
    height: 88px;
    line-height: 88px;
    padding: 0px 30px;
    border-bottom: solid 1px #E0E0E0;
    font-size: 30px;
    color: #333;
  }

  .color_car ul li span {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0px 10px;
    position: relative;
    top: 8px;
    right: 10px;
  }

  .showcardphoto {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .popup_hd {
    height: 786px;
    border-radius: 10px;
    width: 600px;
    background-color: #fff;
  }

  .popup_hd_text {
    font-size: 34px;
    margin: 30px 40px 0px 40px;
    color: #333;
    font-weight: 400;
  }

  .popup_hd_top_tip {
    font-size: 24px;
    color: #999;
    margin: 10px 40px;
  }

  .popup_hd_list {
    margin: 0px 40px 0px 40px;
  }

  .popup_hd_list ul li {
    float: left;
    list-style: none;
    font-size: 28px;
    color: #333;
    width: 260px;
    margin-top: 15px;
  }

  .popup_hd_list ul li img {
    width: 48px;
    height: 36px;
  }

  .popup_hd_list ul li span {
    position: relative;
    bottom: 9px;
    left: 8px;
  }

  .popup_hd_btn {
    height: 98px;
    line-height: 98px;
    background-color: #FF6917;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    margin: 20px 40px 0px 40px;
  }

  .showcardimg_box {
    width: 600px;
    margin: auto;
  }

  .showcardimg_box p {
    margin-top: 10px;
    position: relative;
  }

  .showcardimg_box p img {
    width: 600px;
    height: 340px;
  }

  .md-image-reader {
    width: 600px;
    height: 340px;
  }

  .showcardimg_box p span {
    width: 200px;
    height: 88px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    display: inline-block;
    line-height: 88px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: 128px;
    left: 200px;
  }

  .showcardtext h6 {
    text-align: center;
    font-size: 32px;
    color: #FF6917;
    font-weight: 400;
  }

  .showcardtext p {
    color: #fff;
    font-size: 28px;
    text-align: center;
    width: 450px;
    margin: auto;
    padding-top: 10px;
  }

  .cardBtn {
    margin: 10px 40px;
  }

  .cardcannel {
    width: 200px;
    display: inline-block;
    height: 98px;
    line-height: 98px;
    text-align: center;
    font-size: 36px;
    color: #FF6917;
    background-color: #fff;
    border-radius: 10px;
  }

  .cardupload {
    width: 440px;
    display: inline-block;
    height: 98px;
    line-height: 98px;
    text-align: center;
    font-size: 36px;
    color: #fff;
    background-color: #FF6917;
    margin-left: 30px;
    border-radius: 10px;
  }
  .city_list_box {
    background-color: #fff;
    height: 91.8vh;
    position: relative;
  }
  .carModelListmore_box{
    background-color: #fff;
    height: 100vh;
    position: relative;
  }
  .carModelListmorelist p {
    height:88px;
    line-height:88px;
    font-size:28px;
    color:#333;
    border-bottom: solid 1px #eee;
    padding:0px 40px;
  }

  .city_hd {
    padding: 10px 30px;
    font-size: 28px;
    color: #666;
  }

  #city-box {
    height: calc(100vh - 196px);
    background-color: #EFEFEF;
    position: relative;
  }

  .scroll-view-list {
    font-size: 28px;
  }

  .letter {
    background-color: color-primary-background;
    padding: 30px;
    color: color-text-caption;
    width: 100vw;
  }

  .city-name {
    background-color: #fff;
    border-bottom: 1px solid #E0E0E0;
    padding: 30px;
  }

  .fixed-letter {
    position: absolute;
    top: 0px;
    display: flex;
    flex-direction: column;
    align-item: center;
    justify-content: center;
    font-size: 28px;
    right: 30px;
    height: 100%;
    margin-top: 80px;
    z-index: 3;
  }

  .letters {
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
  }
}
</style>
